<template>
	<view class="footer">
		<button @tap="make" class="make">
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQVRGIFFViaT9ot6EmABYMPibLprDqibMkMQ4YS18XvsMzX1MdqgGcyREgg/640?wx_fmt=png&amp;from=appmsg"
				alt="" class="icon" style="float: left;height: 40rpx;margin-top: 30rpx;margin-left: 20rpx;">
			制作同款相册
		</button>
		<button open-type='share' class='sharebutton radius shadow-blur'>
			<view class="shareview">
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQw37CtMk0VIxQeiaVB8p7W7P2GCU7ATNFvDcvSJyIDJGzul5aN7tW9Ew/640?wx_fmt=png&amp;from=appmsg"
					alt="" class="icon icon2">
				分享
			</view>
		</button>
	</view>
</template>

<script>
	export default {
		name: "footer",
		props: {
			detail: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
			};
		},
		methods: {
			make() {
				uni.navigateTo({
					url: '/pages/make/make?templateid=' + this.detail.templateid +
						'&showano=' + this.detail
						.showano +
						'&ano=' + this.detail.ano + '&title=' + this.detail.title +
						"&type="+this.detail.type
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 5vh;
		width: 96%;
		height: 50rpx;
		padding: 5px 6%;
		margin: 0 auto;
		display: block;
		z-index: 20;

		button {
			padding: 1px 10px;
			float: left;
			border-radius: 5px;
			color: #fff;
			border-radius: 250px;
			background-color: inherit;
			margin-right: 2%;
			font-weight: bold;
			font-family: 'yahei';
		}

		.sharebutton {
			background: #09bb07;
			color: #fff;
			line-height: 80rpx;
			float: left;
			left: 5%;
			width: 30%;
		}

		.make {
			background-color: #ffaa00;
			width: 50%;
			animation: pulse 2s infinite;
		}
	}
	
	
	.icon {
	  width: 30rpx;
	  height: 60rpx;
	  float: left;
	  margin-top: 10rpx;
	}
	
	.icon2 {
	  width: 60rpx;
	  height: 50rpx;
	  margin-top: 15rpx;
	}
	
	@keyframes pulse {
	  0% {
	    transform: scale(1);
	  }
	
	  50% {
	    transform: scale(1.1);
	  }
	
	  100% {
	    transform: scale(1);
	  }
	}
</style>